<template>
  <el-form label-width="100px">
    <el-form-item label="sku名称">
      <el-input v-model="skuParams.skuName" />
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input type="number" v-model="skuParams.price" />
    </el-form-item>
    <el-form-item label="重量(克)">
      <el-input type="number" v-model="skuParams.weight" />
    </el-form-item>
    <el-form-item label="sku描述">
      <el-input type="textarea" v-model="skuParams.skuDesc" />
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form inline>
        <el-form-item
          v-for="item in arrtArr"
          :key="item.id"
          :label="item.attrName"
        >
          <el-select v-model="item.attrIdAndValueId">
            <el-option
              v-for="attr in item.attrValueList"
              :key="attr.id"
              :label="attr.valueName"
              :value="`${item.id}:${attr.id}`"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form inline>
        <el-form-item
          v-for="item in saleArr"
          :key="item.id"
          :label="item.saleAttrName"
        >
          <el-select v-model="item.saleIdAndValueId">
            <el-option
              v-for="attr in item.spuSaleAttrValueList"
              :key="attr.id"
              :label="attr.saleAttrValueName"
              :value="`${item.id}:${attr.id}`"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table :data="imgArr" :border="true" ref="tableRef">
        <el-table-column type="selection" align="center" />
        <el-table-column prop="date" label="图片">
          <template #default="{ row }">
            <img :src="row.imgUrl" style="width:100px;heightL100px;" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="handler(row)">设置默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Plus" @click="save">保存</el-button>
      <el-button type="primary" @click="cancelSku">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reqAddSku } from '@/api/product/spu/index'
import type { SpuData } from '@/api/product/spu/type'
import { reqAttr } from '@/api/product/attr/index'
import { ElMessage, ElTable } from 'element-plus'
import type { AttrResponseData } from '@/api/product/attr/type'
import type {
  SpuHasImg,
  SaleAttrResponseData,
  SkuData
} from '@/api/product/spu/type'
import { reqSpuImageList, reqSpuHasSAleAttr } from '@/api/product/spu/index'
import { ref, reactive } from 'vue'

const $emit = defineEmits(['cancelSku','saveSku'])
const cancelSku = () => {
  $emit('cancelSku')
}
const saveSku = () => {
  $emit('saveSku')
}

let arrtArr = ref<any>([])
let saleArr = ref<any>([])
let imgArr = ref<any>([])
const initSkuData = async (c1Id: '', c2Id: '', spu: SpuData) => {
  skuParams.category3Id = spu.category3Id
  skuParams.spuId = spu.id as number
  skuParams.tmId = spu.tmId

  const result: AttrResponseData = await reqAttr(c1Id, c2Id, spu.category3Id)
  const result1: SpuHasImg = await reqSpuImageList(spu.id as number)
  const result2: SaleAttrResponseData = await reqSpuHasSAleAttr(
    spu.id as number
  )
  console.log(result.data)
  console.log(result1.data)
  console.log(result2.data)

  arrtArr.value = result.data
  imgArr.value = result1.data
  saleArr.value = result2.data
}
defineExpose({ initSkuData })

const handler = (row: any) => {
  skuParams.skuDefaultImg = row.imgUrl
  tableRef.value!.clearSelection()
  tableRef.value!.toggleRowSelection(row, true)
}

const skuParams = reactive<SkuData>({
  category3Id: '',
  spuId: '',
  tmId: '',
  skuName: '',
  price: '',
  weight: '',
  skuDesc: '',
  skuDefaultImg: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})
console.log(skuParams)
const tableRef = ref<InstanceType<typeof ElTable>>()
const save = async () => {
  skuParams.skuAttrValueList = arrtArr.value.reduce((prev: any, next: any) => {
    if (next.attrIdAndValueId) {
      const [attrId, valueId] = next.attrIdAndValueId.split(':')
      prev.push({ attrId, valueId })
    }

    return prev
  }, [])

  skuParams.skuSaleAttrValueList = saleArr.value.reduce(
    (prev: any, next: any) => {
      if (next.saleIdAndValueId) {
        const [saleAttrId, saleAttrValueId] =
          next.saleIdAndsaleAttrValueId.split(':')
        prev.push({ saleAttrId, saleAttrValueId })
      }

      return prev
    },
    []
  )

  await reqAddSku(skuParams)

  ElMessage({
    type:'success',
    message:'添加成功'
  })

  saveSku()
}
</script>

<style scoped></style>
